<template>
  <!--备件台账-->
  <div class="app-container">
    <el-form class="jc_search_wrap" v-model="searchList">
      <label>备件编号</label><el-input></el-input>
      <label>仓库</label>
      <el-select placeholder="请选择" v-model="pl88">
        <el-option label="可用" value="enabled"></el-option>
        <el-option label="不可用" value="disabled"></el-option>
      </el-select>
      <label>库存预警</label>
      <el-select placeholder="请选择" v-model="pl88">
        <el-option label="可用" value="enabled"></el-option>
        <el-option label="不可用" value="disabled"></el-option>
      </el-select>
      <el-checkbox v-model="pl88">停用备件</el-checkbox>
      <el-button @click=""><i class="el-icon-search"></i>更多</el-button>
      <el-button @click="searchRows"><i class="el-icon-search"></i>搜索</el-button>
    </el-form>
    <el-button-group class="jc_btn_wrap jc_btn_left">
      <el-button @click="createRow"><i class="jc_icon el-icon-plus"></i>新增备件</el-button>
      <el-button @click="editRow"><i class=""></i>编辑</el-button>
      <el-button @click="deleteRow"><i class=""></i>删除</el-button>
      <el-button @click="in_wh"><i class=""></i>入库</el-button>
      <el-button @click="out_wh"><i class=""></i>出库</el-button>
      <el-button @click=""><i class=""></i>更改状态</el-button>
    </el-button-group>
    <el-button-group class="jc_btn_wrap jc_btn_right">
      <el-button @click=""><i class=""></i>导出</el-button>
      <el-button @click=""><i class=""></i>显示字段</el-button>
    </el-button-group>
    <el-table :data="list" :height="tableHeight_top" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row class="jc_table_wrap" ref="multipleTable" @selection-change="handleSelectionChange">
      <el-table-column  type="selection">
      </el-table-column>
      <el-table-column label='操作'>
        <template scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label="备件图片">
        <template scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>
      <el-table-column label="备件编码">
        <template scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>
      <el-table-column label="备件名称">
        <template scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>
      <el-table-column label="备件类型">
        <template scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>
      <el-table-column label="规格型号">
        <template scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>
      <el-table-column label="制造厂商">
        <template scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>
      <el-table-column label="供应商">
        <template scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>
      <el-table-column label="计量单位">
        <template scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>
      <el-table-column label="库存上限">
        <template scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>
      <el-table-column label="库存下限">
        <template scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>
      <el-table-column label="总库存">
        <template scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :total="total" @current-change="changePage" :page-size="15"/>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <!--出入库明细---------------------------------------------------------------------------------------------------------->
        <el-tab-pane label="出入库明细" name="first">
          <label>出入库类型</label>
          <el-select placeholder="请选择" v-model="pl88">
            <el-option label="全部" value="1"></el-option>
            <el-option label="出库" value="2"></el-option>
            <el-option label="入库" value="2"></el-option>
          </el-select>
          <el-table :data="list"  :height="tableHeight_bottom" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row class="jc_table_wrap" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column  type="index"  label='编号' width="70">
            </el-table-column>
            <el-table-column label='详细'>
              <template scope="scope">
                {{scope.row.name}}
              </template>
            </el-table-column>
            <el-table-column label="出入库单号">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="仓库">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="方向">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="类型">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="入库">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="出库">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="库存">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="记录人">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="关联单号">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!--库存数-------------------------------------------------------------------------------------------------------------->
        <el-tab-pane label="库存数" name="second">
          <el-table :data="list"  :height="tableHeight_bottom" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row class="jc_table_wrap" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column  type="index"  label='编号' width="70">
            </el-table-column>
            <el-table-column label='仓库'>
              <template scope="scope">
                {{scope.row.name}}
              </template>
            </el-table-column>
            <el-table-column label="库存数">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!--更换记录------------------------------------------------------------------------------------------------------------->
        <el-tab-pane label="更换记录" name="third">
          <el-table :data="list"  :height="tableHeight_bottom" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row class="jc_table_wrap" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column  type="index" label='编号' width="70">
            </el-table-column>
            <el-table-column label='备件编号'>
              <template scope="scope">
                {{scope.row.name}}
              </template>
            </el-table-column>
            <el-table-column label="备件名称">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="规格型号">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="类型">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="关联单号">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="更换时间">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="更换人">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="更换数量">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!--备件图片------------------------------------------------------------------------------------------------------------->
        <el-tab-pane label="备件图片" name="fourth">
          <el-button>上传图片</el-button>
        </el-tab-pane>
        <!--关联文档------------------------------------------------------------------------------------------------------------->
        <el-tab-pane label="关联文档" name="fifth">
          <el-button>上传文档</el-button>
          <el-button>删除</el-button>
          <el-table :data="list"  :height="tableHeight_bottom" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row class="jc_table_wrap" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column  type="index"  label='编号' width="70">
            </el-table-column>
            <el-table-column label='操作'>
              <template scope="scope">
                {{scope.row.name}}
              </template>
            </el-table-column>
            <el-table-column label="文件名">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="文档类型">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="上传时间">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="上传者">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="文件类型">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="文件大小">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!--关联设备------------------------------------------------------------------------------------------------------------->
        <el-tab-pane label="关联设备" name="sixth">
          <el-button>关联设备</el-button>
          <el-button>删除</el-button>
          <el-table :data="list"  :height="tableHeight_bottom" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row class="jc_table_wrap" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column  type="index"  label='编号' width="70">
            </el-table-column>
            <el-table-column label='关联备件数量'>
              <template scope="scope">
                {{scope.row.name}}
              </template>
            </el-table-column>
            <el-table-column label="设备部位">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="设备编号">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="设备信息">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="设备名称">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="规格型号">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="设备类型">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="使用部门">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="按照地点">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="使用状况">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="操作人">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="设备编辑">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
            <el-table-column label="备注">
              <template scope="scope">
                {{scope.row.description}}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>


  </div>
</template>

<script>

  import {getRoleList} from "../../api/system";

  export default {
    components: {

    },
    data() {
      return {
        searchList: {},
        list: null,
        activeName: 'first',
        total:0,
        multipleSelection: [],
        pl88: '',
      }

    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        };
        return statusMap[status]
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData(p=1) {
        this.listLoading = true;
        var params = this.searchList;
        params.page = p;
        getRoleList(params).then(data => {
          this.list = data.data.rows;
          this.total = parseInt(data.data.totalCount);
          this.listLoading = false;
        })
      },
      searchRows() {
        this.fetchData()
      },
      emptyInputs() {
        this.searchList = {
          search_LIKE_name: ''
        };
        this.fetchData()
      },
      createRow() {
        this.$router.push({path:'/warehouse/ledger_addDialog'});
      },
      editRow() {
        this.$router.push({path:'/warehouse/ledger_editDialog'});
      },
      in_wh() {
        this.$router.push({path:'/warehouse/ledger_in_whDialog'});
      },
      out_wh() {
        this.$router.push({path:'/warehouse/ledger_out_whDialog'});
      },
      deleteRow() {
        alert('用this.multipleSelection获得要删除的数据');
        console.log('this.multipleSelection',this.multipleSelection);
      },
      changePage(p) {
        this.fetchData(p)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },
    computed: {
      tableHeight() {
        const filterHeight = 28;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight;
      },
      tableHeight_top() {
        const filterHeight = 28;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight/2-10;
      },
      tableHeight_bottom() {
        const filterHeight = 100;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight/2-10;
      },
    }
  }
</script>
